<template>
  <div class="app-container">
    <!-- 添加统计信息区域 -->
    <section class="stats-section">
      <div class="stat-card">
        <h3>棉花总株树</h3>
        <p style="font-size: 15px">{{mhNumber}}株</p>
      </div>
      <div class="stat-card">
        <h3>螨害株树</h3>
        <p style="font-size: 15px">{{bcMhzs}}株</p>
      </div>
      <div class="stat-card">
        <h3>螨害株率</h3>
        <p style="font-size: 15px">{{bcYmzl}}%</p>
      </div>
    </section>
    <div>
      <el-card style="width: 500px;">
        <div style="margin-bottom: 15px;text-align: left">系统公告</div>
    <el-timeline>

      <el-timeline-item v-for = "(item, index) in announcements" :key = "index" :timestamp = "item.createTime" placement = "top">
        <el-card>
          <h4>{{ item.title }}     ||(提交人:{{item.author}})提交时间时间:{{item.createTime}}</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>

      </el-timeline>
      </el-card>
    </div>
    <section class="combined-section">
      <div class="chart-card">
        <template>
          <div id="container"></div>
        </template>
      </div>
    </section>


<!--天气-->
    <section class="combined-section">
      <div class="chart-card1" style="position: absolute; top: 650px; right: 0; width: 800px; padding: 20px;">
        <div class="weather-card" style="background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 30px; min-height: 220px; transition: transform 0.2s ease;">
          <div class="weather-content" style="display: flex; align-items: center; gap: 40px; padding: 20px;">
            <!-- 天气图标 -->
            <div class="weather-icon" :class="weatherClass" style="font-size: 80px; color: #2d8cf0; flex-shrink: 0;"></div>

            <!-- 核心天气信息 -->
            <div class="main-info" style="flex-grow: 1;">
              <h3 style="color: #2c3e50; font-size: 24px; margin-bottom: 8px;">成都双流 今日天气</h3>
              <p class="temperature" style="font-size: 40px; font-weight: 600; color: #34495e; margin-bottom: 12px;">
                <span style="color: #2d8cf0; margin-right: 8px;">{{ tempC }}℃</span> /
                <span style="color: #7f8c8d;">{{ tempF }}℉</span>
              </p>
              <p class="condition" style="font-size: 18px; color: #7f8c8d; margin-bottom: 24px;">{{ weatherDescZh }}</p>
            </div>

            <!-- 详细信息 -->
            <div class="detail-info" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px;">
              <div class="info-item" style="padding: 14px 20px; background: #f8f9fa; border-radius: 10px; transition: background 0.2s ease;">
                <span style="color: #95a5a6; font-weight: 500; margin-right: 8px;">体感温度</span>
                <span style="color: #333; font-weight: 600;">{{ feelsLikeC }}℃</span>
              </div>
              <div class="info-item" style="padding: 14px 20px; background: #f8f9fa; border-radius: 10px; transition: background 0.2s ease;">
                <span style="color: #95a5a6; font-weight: 500; margin-right: 8px;">湿度</span>
                <span style="color: #333; font-weight: 600;">{{ humidity }}%</span>
              </div>
              <div class="info-item" style="padding: 14px 20px; background: #f8f9fa; border-radius: 10px; transition: background 0.2s ease;">
                <span style="color: #95a5a6; font-weight: 500; margin-right: 8px;">风速</span>
                <span style="color: #333; font-weight: 600;">{{ windSpeedKph }} km/h</span>
              </div>
              <div class="info-item" style="padding: 14px 20px; background: #f8f9fa; border-radius: 10px; transition: background 0.2s ease;">
                <span style="color: #95a5a6; font-weight: 500; margin-right: 8px;">气压</span>
                <span style="color: #333; font-weight: 600;">{{ pressure }} hPa</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
<!--    <div class="weather-card">-->
<!--    <iframe-->
<!--      width="820px"-->
<!--      scrolling="no"-->
<!--      height="300px"-->
<!--      style="background: #79bbff; color: #fff;margin-bottom: 300px"-->
<!--      frameborder="0"-->
<!--      allowtransparency="true"-->
<!--      src="https://i.tianqi.com?c=code&id=9&color=%23FFFFFF&icon=1&py=shuangliu&site=12"-->
<!--    ></iframe>-->
<!--      </div>-->

  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '88e8fade9cfcb2a4d201eefeaf23cd38'
}
export default {
  data () {
    return {
      tempC: '--',        // 摄氏温度
      tempF: '--',        // 华氏温度
      feelsLikeC: '--',   // 体感温度（℃）
      humidity: '--',     // 湿度
      windSpeedKph: '--',  // 风速（km/h）
      pressure: '--',     // 气压
      weatherDescZh: '--', // 中文天气描述
      weatherClass: 'wi wi-unknown', // 天气图标类名
      map: null,
      mhNumber: 0,
      bcMhzs: 0,
      bcYmzl: 0,
      announcements: []
    }
  },
  mounted () {
    this.fetchWeatherData()
    // DOM初始化完成进行地图初始化
    this.initMap()
    this.getMhNumber()
    this.getIsActive()
  },
  methods: {
    fetchWeatherData () {
      fetch('https://wttr.in/shuangliu?format=j1&lang=zh')
        .then(res => res.json())
        .then(data => {
          if (data.current_condition && data.current_condition.length > 0) {
            const current = data.current_condition[0]
            this.tempC = current.temp_C
            this.tempF = current.temp_F
            this.feelsLikeC = current.FeelsLikeC
            this.humidity = current.humidity
            this.windSpeedKph = current.windspeedKmph
            this.pressure = current.pressure
            this.weatherDescZh = current.lang_zh[0].value || current.weatherDesc[0].value

            // 映射天气代码到图标（根据 weatherCode 或描述）
            this.setWeatherIcon(current)
          }
        })
        .catch(error => {
          console.error('天气数据获取失败:', error)
        })
    },
    setWeatherIcon (data) {
      // 根据 weatherCode 映射图标（参考 wttr.in 图标代码：https://wttr.in/doc.html#icons）
      const codeMap = {
        113: 'wi wi-day-sunny',       // 晴
        116: 'wi wi-day-cloudy',      // 多云
        119: 'wi wi-day-fog',         // 雾
        122: 'wi wi-day-showers',     // 阵雨
        143: 'wi wi-day-haze',        // 霾
        176: 'wi wi-showers'         // 附近有雨（示例中的 code 176）
        // 其他 code 映射...
      }
      this.weatherClass = codeMap[data.weatherCode] || 'wi wi-unknown'
    },
    // 公告
    getIsActive () {
      this.$http({
        url: this.$http.adornUrl('/sys/notices/isactive'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.announcements = data.data
          console.log('"bcMhzs：' + JSON.stringify(data.data[0]))
        }
      })
    },
// 展示的3个数据
    getMhNumber () {
      this.$http({
        url: this.$http.adornUrl('/mh/bc/zhanshi'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.mhNumber = data.mhNumber
          this.bcMhzs = data.bcMhzs
          this.bcYmzl = data.bcYmzl
          // this.totalPage = data.page.totalCount
          console.log('"bcMhzs：' + data.bcMhzs)
        }
      })
    },
    // 地图
    initMap () {
      AMapLoader.load({
        key: 'f5ca3515c1c49739640812e0e4981493', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [103.988471, 30.581856] // 双流区成都信息工程大学
          })
        })
        .catch(e => {
          console.log(e)
        })
    }

  }
}
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  color: #333;
  overflow-y: auto;
  position: relative;
}

.stats-section{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* width: 100%; */
  width: 1350px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1 1 calc(33.333% - 10px);
  margin: 5px;
  text-align: center;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #dfe4ea;
}
.employee-list th {
  background-color: #eef4ff;
  font-weight: bold;
}

.stat-card h3,
.chart-card h3,
.employee-list h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}
.chart-card{
  position: absolute;
  top: 150px;
  right: 0;
  margin: 5px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 300px;
  overflow-y: auto;
  border: 1px solid #dfe4ea;
  width: 800px;
}
.chart-card1{
  position: absolute;
  top: 650px;
  right: 0;
  margin: 5px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-sizing: border-box;
  min-height: 250px;
  /*overflow-y: auto;*/
  border: 1px solid #dfe4ea;
  width: 800px;
}
.chart {
  width: 100%;
  height: 250px;
}
.stat-card b,
.chart-card b {
  font-size: 20px;
  color: #333;
}
.stat-card h3,
.chart-card h3,
.employee-list h2 {
  color: #80e5f7;
}
.stat-card b,
.chart-card b {
  color: #80e5f7;
}
#container {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 20px auto;
  background-color: lightgray;
  border: 2px solid gray;
}
.weather-card {
  width: 800px;
  height: 200px;
  margin:  auto;
}

</style>
